<template>
  <div>
    <SectionContainer class="u-p30 u-mb0">
      <!-- 密码管理 -->
      <el-form
        :model="pwdForm"
        :rules="pwdRules"
        ref="pwdForm"
        label-width="160px"
      >
        <el-form-item
          class="u-w600"
          label="原密码："
          prop="oldPassword"
        >
          <el-input
            type="password"
            autocomplete="new-password"
            v-model="pwdForm.oldPassword"
            placeholder="请输入原密码"
          ></el-input>
        </el-form-item>
        <el-form-item
          class="u-w600"
          label="新密码："
          prop="newPassword"
        >
          <el-input
            type="password"
            autocomplete="new-password"
            v-model="pwdForm.newPassword"
            placeholder="请输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item
          class="u-w600 u-mb0"
          label="确认密码："
          prop="checkPassword"
        >
          <el-input
            type="password"
            autocomplete="new-password"
            v-model="pwdForm.checkPassword"
            placeholder="请确认新密码"
          ></el-input>
        </el-form-item>
      </el-form>
    </SectionContainer>

    <div class="u-page-handle">
      <el-button
        size="small"
        type="primary"
        @click="fetchAccountUpdatePwd"
      >确 定</el-button>
      <el-button
        size="small"
        @click="back"
      >返 回</el-button>
    </div>
  </div>
</template>

<script>
import SectionContainer from "@/components/section-container";

import { getStrLen, sessionStorage } from "@/utils";
import { fetchAccountUpdatePwd } from "@/api";
import permissionMixin from "@/mixins/permission";

export default {
  mixins: [permissionMixin],
  components: {
    SectionContainer
  },
  data() {
    return {
      user: sessionStorage.get("USER"),
      pwdForm: {
        oldPassword: "",
        newPassword: "",
        checkPassword: ""
      },
      pwdRules: {
        oldPassword: {
          required: true,
          trigger: ["blur", "change"],
          validator: (rule, value, callback) => {
            if (!value) {
              callback(new Error("请输入原密码"));
            } else if (
              getStrLen(value) < 6 ||
              getStrLen(value) > 16 ||
              !/^\w+$/.test(value)
            ) {
              callback(new Error("请输入6-16位数字或字母"));
            } else {
              callback();
            }
          }
        },
        newPassword: {
          required: true,
          trigger: ["blur", "change"],
          validator: (rule, value, callback) => {
            if (!value) {
              callback(new Error("请输入新密码"));
            } else if (
              getStrLen(value) < 6 ||
              getStrLen(value) > 16 ||
              !/^\w+$/.test(value)
            ) {
              callback(new Error("请输入6-16位数字或字母"));
            } else {
              callback();
            }
          }
        },
        checkPassword: {
          required: true,
          trigger: ["blur", "change"],
          validator: (rule, value, callback) => {
            if (!value) {
              callback(new Error("请确认新密码"));
            } else if (
              getStrLen(value) < 6 ||
              getStrLen(value) > 16 ||
              !/^\w+$/.test(value)
            ) {
              callback(new Error("请输入6-16位数字或字母"));
            } else if (
              this.pwdForm.checkPassword !== this.pwdForm.newPassword
            ) {
              callback(new Error("两次输入密码不一致!"));
            } else {
              callback();
            }
          }
        }
      }
    };
  },
  methods: {
    // 更新密码
    fetchAccountUpdatePwd() {
      this.$refs.pwdForm.validate(valid => {
        if (valid) {
          // 密码修改接口竟然query传递 !- -
          fetchAccountUpdatePwd({
            query: {
              userId: this.user.userId
            },
            body: {
              newPassword: this.pwdForm.newPassword,
              oldPassword: this.pwdForm.oldPassword
            }
          }).then(() => {
            this.$message("密码修改成功！");
            setTimeout(() => {
              sessionStorage.clearAll();
              this.$router.replace({
                name: "login"
              });
            }, 1000);
          });
        } else {
          return false;
        }
      });
    },
    // 返回
    back() {
      this.$router.replace({
        name: this.$route.query.referrer,
        query: {
          ...this.$route.query.query
        }
      });
    }
  }
};
</script>